<template>
	<view class="main">
		<!-- ======================================【顶部栏】====================================== -->
		<MyHead :title="title"></MyHead>
		<!-- ===================================================================================== -->
	
		<view class="container">
			<view class="header">
				<text class="title">专题试卷 | 数据结构</text>
			</view>
			
			<view class="TwoModules">
				<view class="module">
					<view class="title">考前冲刺试题</view>
					<view class="text">1对1在线辅导，重点讲解</view>
				</view>
				
				<view class="module">
					<view class="title">考前冲刺试题</view>
					<view class="text">1对1在线辅导，重点讲解</view>
				</view>
			</view>
		
			<view class="cards-container">
				<view class="card" 
					  v-for="(item, index) in chapters" 
					  :key="index"
					  @click="goToDetail(item)"
				>
					<view class="card-header">
						<text class="chapter-title">{{ item.title }}</text>
						<text class="people-count">| {{ item.peopleCount }}人已练习</text>
					</view>
					
					<view class="card-body">
						<text class="status">未完成</text>
						<text class="details">
							共{{ item.questionsCount }}题 | 已用{{ item.timeUsed }}min | 练习时间{{ item.practiceTime }}
						</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			chapters: [
				{ 
					id: 1,
					title: '第一章：绪论', 
					peopleCount: 1274, 
					questionsCount: 10, 
					timeUsed: 1, 
					practiceTime: '10-17 23:31' ,
				},
				{ 
					id: 2,
					title: '第二章：绪论', 
					peopleCount: 1274, 
					questionsCount: 10, 
					timeUsed: 1, 
					practiceTime: '10-17 23:31' ,
				},
				{ 
					id: 3,
					title: '第三章：绪论', 
					peopleCount: 1274, 
					questionsCount: 10, 
					timeUsed: 1, 
					practiceTime: '10-17 23:31' 
				},
				{ 
					id: 4,
					title: '第四章：绪论', 
					peopleCount: 1274, 
					questionsCount: 10, 
					timeUsed: 1, 
					practiceTime: '10-17 23:31' 
				},
				{ 
					id: 5,
					title: '第五章：绪论', 
					peopleCount: 1274, 
					questionsCount: 10, 
					timeUsed: 1, 
					practiceTime: '10-17 23:31' ,
				},
			],
		};
	},
	onLoad(params){
		console.log(params)
	},
	methods: {
		goToDetail(item){
			uni.navigateTo({
				url: `../../ExercisePages/ExerciseDetail/ExerciseDetail?${item.id}`
			})
		}
	}
};
</script>


<style>
	page {
		background-image: url('https://gd-hbimg.huaban.com/68bb9dee1eed7f34673120d61b18a29d88adcb83713c9-hDYMPo_fw480webp'); 
		background-size: 100% 100%;
	}
</style> 
<style lang="less" scoped>
	.main {
		width: 100%;
		height: 100%;
		.container {
			color: #fff;
		    width: 100%;
		    height: 100%;
			min-height: 90vh;
		    border-top-left-radius: 45px;
		    border-top-right-radius: 45px;
		    padding: 20px;
			padding-left: 55rpx;
			padding-right: 55rpx;
		    position: relative;
		    overflow: hidden;
		    background-color: rgb(47, 52, 76);

			.header {
				margin-bottom: 20px;
				.title {
					font-size: 24px;
					font-weight: bold;
				}
			}
			
			.TwoModules{
				width: 100%;
				height: 220rpx;
				display: flex;
				justify-content: space-between;
				.module{
					width: 45%;
					height: 250rpx;
					color: #fff;
					border-radius: 10px;
					margin-bottom: 15px;
					padding: 15px;
					box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
					background-image: linear-gradient(to bottom, rgb(28, 32, 45), rgb(63, 68, 93));
					height: 170rpx;
					.title{
						margin-top: 10rpx;
						font-size: 20px;
					}
					.text{
						font-size: 12px;
						margin-top: 28rpx;
					}
				}
			}

			.cards-container {
				display: flex;
				flex-direction: column;

				.card {
					color: #fff;
					border-radius: 10px;
				    margin-bottom: 15px;
				    padding: 15px;
				    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
				    background-image: linear-gradient(to bottom, rgb(28, 32, 45), rgb(63, 68, 93));
				    height: 190rpx;

					.card-header {
						display: flex;
						align-items: center;
						margin-bottom: 10px;
						
						.chapter-title {
							font-size: 20px;
						}

						.people-count {
							font-size: 14px;
						}
					}

					.card-body {
						margin-top: 37rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.status {
						    width: 100rpx;
						    height: 47rpx;
						    border-radius: 10px;
						    font-size: 13px;
						    text-align: center;
						    background-color: #5d6377;
						    line-height: 25px;
						}

						.details {
							font-size: 12px;
						}
					}
				}
			}
		}
	}
</style>